<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <title>幸运抽奖</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta name="x5-orientation" content="portrait">
    <link rel="stylesheet" th:href="@{/app/css/style.css}"/>
    <link rel="stylesheet" th:href="@{/app/css/style2.css}"/>
    <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/app/js/if_heng.js}"></script>
    <script type="text/javascript" th:src="@{/app/js/font-size.js}"></script>
    <script>
        if (!'[[${openId}]]' || !'[[${lotteryId}]]') {
            window.location.href = '[[${contextPath}]]/wechat/login'
        }
    </script>
</head>
<body>
<form>
    <input type="hidden" id="lotteryId" th:value="${lotteryId}">
    <input type="hidden" id="openId" th:value="${openId}">
</form>
<div class="box-size" id="app" :style="{backgroundImage:'url('+a_bg+')'}">
    <p class="top"><img :src=a_top></p>
    <div class="zhuanpan-div">
        <img :src=a_zhuanpan_bg>
        <div class="zhuanpan" id="rotate">
            <img :src=a_zhuanpan>
            <!--<li  v-for="gift in gifts"   ><span >{{gift.pic}}</span></li>-->
            <my-component :gift='gifts'></my-component>
        </div>
        <button type="button" @click="start()" class="btn start-btn"><img :src=a_start></button>
    </div>
    <div class="bottom">
        <img :src=a_bottom>
        <button class="btn rule-btn" @click="t_type='rule',if_tc = true"></button>
        <button class="btn gift-btn" @click="t_type='my',if_tc = true"></button>
        <!--        <button class="btn jilu-btn">中奖记录</button>-->
    </div>
    <div class="tanchuang" v-if="if_tc">
        <div class=" back-bg" @click="if_tc = false"></div>
        <transition name="fade">
            <div v-if="t_type == 'my'" class="gift-show">
<!--                <img :src=a_my width="100%">-->
                <div class="jn-box">
                    <span class="btn-close" @click="if_tc = false">×</span>
                    <div id="tabs" class="tabs">
                        <strong @click="t_type='rule',if_tc = true"><span>活动说明</span></strong>
                        <strong @click="t_type='my',if_tc = true" class="current"><span>我的奖品</span></strong>
                    </div>
                    <div id="tabs-body" class="tabsbox" style="height: 500px;">
                        <div v-if="myLotteryLog.length == 0" class="Prize">
                            <p>暂无中奖信息。</p>
                        </div>
                        <div v-for="item in myLotteryLog" class="Prize">
                            <p>奖项：{{item.lotteryPrizeTitle}}</p>
                            <p>奖品名称：{{item.lotteryPrizeName}}</p>
                            <p>数量：1</p>
                            <p>中奖日期：{{item.crteTime}}</p>
                            <div >
                                <p style="color: #c09735;">联系人姓名：{{item.psnName}}</p>
                                <p style="color: #c09735;">联系人电话：{{item.tel}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
<!--            <button class="btn close" @click="if_tc = false"></button>-->
            <div v-else-if="t_type == 'rule'" class="rule-show">
<!--                <img :src=a_rule width="100%">-->
<!--                <button class="btn close" @click="if_tc = false"></button>-->
                <div class="jn-box">
                    <span class="btn-close" @click="if_tc = false">×</span>
                    <div class="tabs">
                        <strong @click="t_type='rule',if_tc = true" class="current"><span>活动说明</span></strong>
                        <strong @click="t_type='my',if_tc = true"><span>我的奖品</span></strong>
                    </div>
                    <div class="tabsbox">
                        <div style="position: relative; overflow:scroll; height: 500px;">
                            <h4>活动时间</h4>
                            <p th:text="${lotteryTime}">2024年09月17日00：00—2024年09月30日20：00。</p>
                            <h4>活动内容</h4>
                            <p th:text="${lotteryContent}">2024年09月17日00：00—2024年09月30日20：00。</p>
                            <h4>活动奖品：</h4>
                            <p th:each="lotteryPrizeDO : ${lotteryPrizeDOS}" th:text="${lotteryPrizeDO.lotteryPrizeTitle + '：' + lotteryPrizeDO.lotteryPrizeName + '&emsp;&emsp;[' + lotteryPrizeDO. prizeCnt+ ']名'}"></p>
                            <h4>主办单位</h4>
                            <p>本次活动主办单位为乌兰察布市总工会。<br/>主办单位在法律允许的范围内拥有活动的最终解释权。</p>
                            <h4>活动及兑奖</h4>
                            <p>每个微信号有1次抽奖机会，抽奖前需要先进行手机号和姓名的绑定。<br/>
                                本次活动奖品由乌兰察布市总工会提供，请中奖人员抽中奖品后私信联系活动负责人并进行奖品核验和领取。
                            </p>
                            <h4>后台中奖设置</h4>
                            <p>活动期间，每个微信号最多能够抽取一次奖品。</p>
                        </div>
                    </div>
                </div>
            </div>
            <div v-else-if="t_type == 'gift'" class="rule-show">
                <img :src=a_gift width="100%">
                <div class="gift-mess">
                    <p><img :src="result_gift_pic" style=""></p>
                    <p>{{result_gift_name}}</p>
                </div>
                <button class="btn use-btn"></button>
            </div>
        </transition>
    </div>
</div>
<script type="text/x-template" id="my-component">
    <ul>
        <template v-for="item in gift">
            <li :style="{transform:'rotate('+item.angles+'deg)'}">
                <span :style="{ backgroundSize: '50px', backgroundImage:'url('+item.pic+')'}"></span>
            </li>
        </template>
    </ul>
</script>

<script type="text/javascript" th:src="@{/app/js/vue.min.js}"></script>
<script type="text/javascript" th:src="@{/app/js/awardRotate.js}"></script>
<script>
    Vue.component('my-component', {
        template: '#my-component',
        props: {
            gift: Array,
        },
    });
    var vue = new Vue({
        el: "#app",
        data: {
            if_tc: false,  //弹窗是否显示
            t_type: "",  //弹窗类型
            myLotteryLog: [],
            disableBtn: true,
            gifts: [
                {
                    pic: '[[@{/}]]app/images/thanks.png',
                    name: '谢谢惠顾',
                    angles: ''
                },
                {
                    pic: '[[@{/}]]app/images/thanks.png',
                    name: '谢谢惠顾',
                    angles: ''
                },
                {
                    pic: '[[@{/}]]app/images/thanks.png',
                    name: '谢谢惠顾',
                    angles: ''
                }, {
                    pic: '[[@{/}]]app/images/thanks.png',
                    name: '谢谢惠顾',
                    angles: ''
                },
                {
                    pic: '[[@{/}]]app/images/thanks.png',
                    name: '谢谢惠顾',
                    angles: ''
                }, {
                    pic: '[[@{/}]]app/images/thanks.png',
                    name: '谢谢惠顾',
                    angles: ''
                },
                {
                    pic: '[[@{/}]]app/images/thanks.png',
                    name: '谢谢惠顾',
                    angles: ''
                },
                {
                    pic: '[[@{/}]]app/images/thanks.png',
                    name: '谢谢惠顾',
                    angles: ''
                }

            ],  //奖品
            result_gift_name: '',  //中奖奖品名
            result_gift_pic: '',  //中奖奖品图片
            a_bg: '[[@{/}]]app/images/bg.jpg', //背景
            a_top: '[[@{/}]]app/images/top.png', //顶部图
            a_zhuanpan_bg: '[[@{/}]]app/images/zhuanpan-bg.png',//转盘背景
            a_zhuanpan: '[[@{/}]]app/images/zhuanpan.png',//转盘图
            a_start: '[[@{/}]]app/images/start-btn.png',//开始按钮
            a_bottom: '[[@{/}]]app/images/bottom.png',//底部图
            a_rule: '[[@{/}]]app/images/rule-show.png',//活动规则图
            a_my: '[[@{/}]]app/images/my.png',//我的奖品图
            a_gift: '[[@{/}]]app/images/gift-bg.png' //奖品弹窗
        },
        mounted: function () {
            let that = this
            that.disableBtn = false
            $.ajax({
                cache : true,
                type : "POST",
                url : "[[@{/}]]wechat/queryLotteryPrize",
                data : {
                    "lotteryId": document.getElementById('lotteryId').value
                },
                async : false,
                error : function(request) {
                    alert('出现错误！')
                },
                success : function(data) {
                    that.fangxiang(data.data);
                }
            });
        },
        computed: {},
        methods: {
            fangxiang: function (prizes) {
                var vm = this,
                    gift_l = vm.gifts.length,
                    every_angle = Math.floor(360 / gift_l);
                for (var i = 0; i < gift_l; i++) {
                    vm.gifts[i].angles = every_angle / 2 + every_angle * i;
                }
                let randomArray = this.getRandomValues(prizes.length)
                for (let i in randomArray) {
                    this.gifts[randomArray[i]].pic = prizes[i].prizeImgBase64String
                    this.gifts[randomArray[i]].lotteryPrizeId = prizes[i].lotteryPrizeId
                    this.gifts[randomArray[i]].lotteryPrizeTitle = prizes[i].lotteryPrizeTitle
                    this.gifts[randomArray[i]].lotteryPrizeName = prizes[i].lotteryPrizeName
                    this.gifts[randomArray[i]].name = prizes[i].lotteryPrizeName
                }
            },
            getRandomValues (cnt) {
                let randomArray = []
                randomArray.push(Math.floor(Math.random() * 8))
                do {
                    let randNum = Math.floor(Math.random() * 8)
                    if (!randomArray.includes(randNum)) {
                        randomArray.push(randNum)
                    }
                } while (randomArray.length < cnt)
                return randomArray
            },
            start: function () {
                if (this.disableBtn) {
                    return
                }
                var that = this;
                that.disableBtn = true
                var activeKey = 0  //随机
                $.ajax({
                    cache : true,
                    type : "POST",
                    url : "[[@{/}]]wechat/getLotteryResult",
                    data : {
                        "lotteryId": document.getElementById('lotteryId').value,
                        "openId": document.getElementById('openId').value
                    },
                    async : false,
                    error : function(request) {
                        alert('出现错误！')
                    },
                    success : function(data) {
                        if (data && data.code == '500') {
                            alert(data.msg)
                        } else if (data && data.data && data.data.lotteryPrizeId) {
                            for (let k in that.gifts) {
                                if (data.data.lotteryPrizeId === that.gifts[k].lotteryPrizeId) {
                                    activeKey = k
                                    that.generateResult(activeKey, that.gifts)
                                    console.log('恭喜您中奖了！')
                                    break
                                }
                            }
                        } else {
                            for (let k in that.gifts) {
                                if (!that.gifts[k].lotteryPrizeId) {
                                    activeKey = k
                                    that.generateResult(activeKey, that.gifts)
                                    console.log('很遗憾您没有中奖！')
                                    break
                                }
                            }
                        }
                    }
                });
                // that.generateResult(3)
            },
            generateResult (activeKey, gifts) {
                var vm = this,
                    gift_l = vm.gifts.length,
                    every_angle = Math.floor(360 / gift_l);
                var bRotate = false;
                var rotateFn = function (awards, angles, gift) {
                    let animate = 0
                    for (let i in gifts) {
                        if (gift.lotteryPrizeId === gifts[i].lotteryPrizeId) {
                            animate = 2160 - 45 * i
                            break
                        }
                    }
                    // console.error('angles：' + angles)
                    // console.error('animate：' + animate)
                    bRotate = !bRotate;
                    $('#rotate').stopRotate();
                    $('#rotate').rotate({
                        angle: 0,
                        animateTo: angles + animate,
                        duration: 8000,
                        callback: function () {
                            console.log('activeKey：' + activeKey)
                            vm.result_gift_pic = gift.pic;
                            vm.t_type = 'gift';
                            vm.if_tc = true;
                            if (gift.lotteryPrizeId) {
                                vm.a_gift = '[[@{/}]]app/images/gift-bg.png'
                                vm.result_gift_name = gift.lotteryPrizeTitle + '（'  + gift.name + '）';
                            } else {
                                vm.a_gift = '[[@{/}]]app/images/gift-bg2.png'
                                vm.result_gift_name = gift.name;
                            }
                            bRotate = !bRotate;
                            vm.disableBtn = false;
                        }
                    })
                };
                if (bRotate) return;
                if (gift_l == 8) {
                    //不取线
                    rotateFn(0, rnd(1, 44), vm.gifts[activeKey]);
                } else if (gift_l == 6) {
                    switch (activeKey) {
                        case '0':
                            var angle = rnd(1, 59);  //不取线
                            rotateFn(0, angle, vm.gifts[0]);
                            break;
                        case '1':
                            var angle = rnd(61, 119);  //不取线
                            rotateFn(8, angle, vm.gifts[5]);
                            break;
                        case '2':
                            var angle = rnd(121, 179);  //不取线
                            rotateFn(7, angle, vm.gifts[4]);
                            break;
                        case '3':
                            var angle = rnd(181, 239);  //不取线
                            rotateFn(6, angle, vm.gifts[3]);
                            break;
                        case '4':
                            var angle = rnd(241, 299);  //不取线
                            rotateFn(5, angle, vm.gifts[2]);
                            break;
                        case '5':
                            var angle = rnd(301, 359);  //不取线
                            rotateFn(4, angle, vm.gifts[1]);
                            break;
                    }
                } else if (gift_l == 5) {
                    switch (activeKey) {
                        case '0':
                            var angle = rnd(1, 71);  //不取线
                            rotateFn(0, angle, vm.gifts[0]);
                            break;
                        case '1':
                            var angle = rnd(73, 143);  //不取线
                            rotateFn(8, angle, vm.gifts[4]);
                            break;
                        case '2':
                            var angle = rnd(145, 215);  //不取线
                            rotateFn(7, angle, vm.gifts[3]);
                            break;
                        case '3':
                            var angle = rnd(217, 287);  //不取线
                            rotateFn(6, angle, vm.gifts[2]);
                            break;
                        case 4:
                            var angle = rnd(289, 359);  //不取线
                            rotateFn(5, angle, vm.gifts[1]);
                            break;
                    }
                } else if (gift_l == 4) {
                    switch (activeKey) {
                        case '0':
                            var angle = rnd(1, 89);  //不取线
                            rotateFn(0, angle, vm.gifts[0]);
                            break;
                        case '1':
                            var angle = rnd(91, 179);  //不取线
                            rotateFn(8, angle, vm.gifts[5]);
                            break;
                        case '2':
                            var angle = rnd(181, 269);  //不取线
                            rotateFn(7, angle, vm.gifts[4]);
                            break;
                        case '3':
                            var angle = rnd(271, 359);  //不取线
                            rotateFn(6, angle, vm.gifts[3]);
                            break;
                    }
                }
            }
        },
        watch: {
            if_tc: {
                handler: function (val, old) {
                    if (val && this.t_type === 'my') {
                     let that = this
                        $.ajax({
                            cache : true,
                            type : "POST",
                            url : "[[@{/}]]wechat/queryLotteryLog",
                            data : {
                                "lotteryId": document.getElementById('lotteryId').value,
                                "openId": document.getElementById('openId').value
                            },
                            async : false,
                            error : function(request) {
                                alert('出现错误！')
                            },
                            success : function(data) {that.myLotteryLog = data.data
                            }
                        })
                    }
                },
                deep: true
            },
            t_type: {
                handler: function (val, old) {
                    if (val === 'my' && this.if_tc) {
                        let that = this
                        $.ajax({
                            cache : true,
                            type : "POST",
                            url : "[[@{/}]]wechat/queryLotteryLog",
                            data : {
                                "lotteryId": document.getElementById('lotteryId').value,
                                "openId": document.getElementById('openId').value
                            },
                            async : false,
                            error : function(request) {
                                alert('出现错误！')
                            },
                            success : function(data) {
                                that.myLotteryLog = data.data
                            }
                        })
                    }
                },
                deep: true
            }
        }
    });

    function rnd(n, m) {
        return Math.floor(Math.random() * (m - n + 1) + n)
    }
</script>
</body>
</html>
